<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<blockquote class="layui-elem-quote layui-text">
    订单管理
</blockquote>
<div class="layui-form-item">
    <div class="layui-inline">
        <label class="layui-form-label">订单号</label>
        <div class="layui-input-inline">
            <input type="tel" name="orderid" id="orderid" autocomplete="off" class="layui-input">
        </div>
    </div>
    <button class="layui-btn" id="search" onclick="search()">搜索</button><br>

    <div style="padding: 20px; background-color: #F2F2F2;">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header" id="order"></div>
                    <div class="layui-card-body" id="orderbody">

                    </div>
                </div>
            </div>
        </div>
    </div>

    <ul class="layui-timeline" id="timezhou">
    </ul>

    <div class="larry-personal-body clearfix">
        <table class="layui-hide"  id="ordertable" lay-filter="ordertable"></table>
    </div>
</div>

<form class="layui-form" id="accept_order" style="display:none">
    <div class="layui-form-item">
        <label class="layui-form-label">配送地址</label>
        <div class="layui-input-block">
            <input type="text" id="address" name="address" required lay-verify="required" class="layui-input"
                   style="width:200px">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">下个物流</label>
        <div class="layui-input-block">
            <select id="operators" name="operators">
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">是否送达</label>
        <div class="layui-input-block">
            <input type="checkbox" id="switch" name="switch" lay-skin="switch" lay-text="是|否" lay-filter="switch_end">
        </div>
    </div>
</form>

</body>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">右侧进行筛选导出</button>
    </div>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">更新订单</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
    function search() {
        let orderid = $("#orderid").val();
        // 刷新order_body和time_zhou
        $("#orderbody").html('');
        $("#timezhou").html('');
        $.ajax( {
            url: "get_order_by_id",
            data:{
                'id': orderid
            },
            method:'GET',
            success:function (Order) {
                $("#order").html('订单号：'+orderid+'('+Order['status']+')');
                $("#orderbody").append('发件人：'+Order['shipper']+'&nbsp;发件人手机：'+Order['shipperPhone']+'&nbsp;发件人地址：'+Order['shippingAddress']+'&nbsp;下单时间：'+Order['shipTime']);
                $("#orderbody").append('<br>收件人：'+Order['receiver']+'&nbsp;收获人手机：'+Order['receiverPhone']+'&nbsp;收获人地址：'+Order['receiverAddress']);
                let logistics = Order['logistics'];
                for (let i = logistics.length - 1; i >=0 ; i--) {
                    console.log(logistics[i]);
                    $("#timezhou").append(' <li class="layui-timeline-item">\n' +
                        '            <i class="layui-icon layui-timeline-axis"></i>\n' +
                        '            <div class="layui-timeline-content layui-text">\n' +
                        '                <h3 class="layui-timeline-title">'+'('+logistics[i].operationTime+')'+
                        '                </h3><p>'+logistics[i].operator+'&nbsp;'+'<br>'+logistics[i].address);
                    if (logistics[i].phone != 0) {
                        $("#timezhou").append('<br>'+logistics[i].phone);
                    }
                    $("#timezhou").append(' </p>\n' +
                        '            </div>\n' +
                        '        </li>');
                }
            },
            error:function (Order) {
                layer.msg(Order)
            }
        });
    }
    layui.use('table', function() {
        let table = layui.table;
        table.render({
            elem: '#ordertable'
            ,url: 'get_all_orders' //数据接口
            ,page: false //开启分页
            ,toolbar: '#toolbarDemo'
            ,cols: [[ //表头
                {field: 'id', title: 'id',  sort: true, fixed: 'left',width:80}
                ,{field: 'orderTime', title: '下单时间',sort:true,width:80}
                ,{field: 'receiverAddress', title: '收货地址'}
                ,{field: 'receiver', title: '收货人' ,edit:'text'}
                ,{field: 'receiverPhone', title: '收货人手机' }
                ,{field: 'shippingAddress', title: '发货地址'}
                ,{field: 'shipper', title: '发货人'}
                ,{field: 'shipperPhone', title: '发货人手机'}
                ,{field: 'status', title: '物流状态'}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
            ]]
        });
        table.on('tool(ordertable)', function(obj) {
            let data = obj.data;
            let switch_val = false;
            console.log(obj)
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function(index) {
                    $.ajax({
                        url:'delete_order_by_id',
                        data: {
                            'id': data.id,
                        },
                        method:'GET',
                        traditional: true,
                        success:function (msg) {
                            layer.msg(msg);
                            obj.del();
                        },
                        error:function (msg) {
                            layer.msg(msg)
                        }
                    });
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                layer.open({
                    type: 1,
                    area: ['500px', '600px'],
                    title: '更新订单',
                    content: $("#accept_order"),
                    shade: 0,
                    success: function (layero, index) {
                        $.ajax({
                            url: 'get_all_operators',
                            method: 'get',
                            async: false,
                            success: function (operators) {
                                operators.sort();
                                let operators_select = document.getElementById('operators');
                                operators_select.options.add(new Option('', ''));
                                for (let i = 0; i < operators.length; i++) {
                                    operators_select.options.add(new Option(operators[i], `${i}`));
                                }
                                let form = layui.form;
                                form.render();
                            },
                            error: function () {
                                layer.msg('获取所有物流人员名称错误!', {
                                    icon: 2,
                                    time: 2000
                                });
                            }
                        });
                        layui.use(['form'], function () {
                            let form = layui.form;
                            form.on('switch(switch_end)', function (data) {
                                //开关是否开启，true或者false
                                switch_val = data.elem.checked;
                                form.render();
                            });
                        });
                    },
                    btn: ['提交'],
                    btn1: function(index, layero) {
                        let info = {
                            'id': data.id,
                            'address': $("#address").val(),
                            'operator': $('#operators option:selected').text(),
                            'isEnd': switch_val
                        };
                        $.ajax({
                            url: 'update_order',
                            dataType: 'json',
                            data: info,
                            method: 'post',
                            success: function () {
                                $(':input').val('');
                                $('#operators').find('option').remove();
                                form.render();
                                layer.closeAll();
                            },
                            error: function () {
                                layer.msg('更新订单错误!', {
                                    icon: 2,
                                    time: 2000
                                });
                                layer.closeAll();
                            }
                        });
                    },
                    cancel: function(layero, index){
                        layer.closeAll();
                    }
                });
            }
        });
    });
</script>